<template>
  <div class="person">
    <el-card class="card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="我的信息" name="first">
          <div class="message">
            <div class="message-box">
              <label for="">头像:</label>
              <div class="img">
                <img :src="userData.face" alt="" width="10%" />
              </div>
              <div class="account">账号：{{ userData.account }}</div>
              <div class="depart">部门：{{ userData.organId.name }}</div>
              <div class="gang">岗位：{{ userData.stationId.name }}</div>
            </div>
            <el-form
              :rules="rules"
              :model="editForm"
              label-width="80px"
              size="mini"
            >
              <el-form-item prop="email">
                邮&nbsp;&nbsp;箱:&nbsp;<el-input
                  v-model="editForm.email"
                  style="width: 20%"
                ></el-input>
              </el-form-item>
              <el-form-item prop="phone">
                手机号:<el-input
                  v-model="editForm.phone"
                  style="width: 20%"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="save()">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>

        <el-tab-pane
          label="修改密码"
          name="second"
          class="password"
          style="margin-top: 50px"
        >
          <el-form
            :model="user"
            :rules="rules"
            ref="form"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="原密码" prop="password">
              <el-input
                v-model="editForm.password"
                style="width: 25%"
                placeholder="请输入原密码"
              ></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newpassword">
              <el-input
                style="width: 25%"
                type="password"
                v-model="editForm.newpassword"
                autocomplete="off"
                placeholder="请输入新密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="savePass()">保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      editForm: {
        phone: "",
        email: "",
        password: "",
        newpassword: "",
      },
      activeName: "first",
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      ruleForm: {},
      rules: {},
      userData: JSON.parse(sessionStorage.getItem("userdata")),
    };
  },
  created() {},
  mounted() {
    console.log(this.userData, "5555");
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 修改用户
    async save() {
      await this.$axios.post(
        "/system/update?id=" + this.userData._id,
        this.editForm
      );
      this.$message.success("修改成功");
    },
    // 修改密码
    async savePass() {
      const { data } = await this.$axios.post(
        "/system/upPassword?id=" + this.userData._id,
        this.editForm
      );
      if (data.code == 200) {
        this.$message.success("修改成功");
      } else {
        this.$message.error("改密码不存在 请重新输入");
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.person {
  width: 100%;
  height: 100%;
}
.person .card {
  height: 700px;
}
.person .message {
  padding: 10px 10px;
}
.person .message div {
  margin: 10px;
}
.person .message {
  color: #657180;
}
.person .message .demo-ruleForm input {
  width: 80%;
}
.person .message .message-box {
  margin-left: 80px;
}
</style>
